<template>
  <div>
    <el-card class="box-card">
      <el-form :disabled="disabled">
        <el-select placeholder="请选择一级分类" v-model="category1Id" @change="select1">
          <el-option
            v-for="item in categoryStore.category1List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select placeholder="请选择二级分类" v-model="category2Id" @change="select2">
          <el-option
            v-for="item in categoryStore.category2List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select placeholder="请选择三级分类" v-model="category3Id">
          <el-option
            v-for="item in categoryStore.category3List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useCategoryStore } from '@/stores/category'
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'

const categoryStore = useCategoryStore()
const { category1Id, category2Id, category3Id } = storeToRefs(categoryStore)
defineProps({
  disabled: Boolean
})

const select1 = () => {
  categoryStore.category3List = categoryStore.category2List = []
  categoryStore.category3Id = categoryStore.category2Id = ''
  categoryStore.getCategory2(category1Id.value as string)
}
const select2 = () => {
  categoryStore.category3List = []
  categoryStore.category3Id = ''
  categoryStore.getCategory3(category2Id.value as string)
}

onMounted(() => {
  categoryStore.getCategory1()
})
</script>
<script lang="ts">
export default {
  name: 'CateGory'
}
</script>

<style scoped lang="scss">
.el-select {
  margin-left: 30px;
}
</style>
